<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒模型卡片案例3</title>
		<style>
			#product_card{
				width: 600px;
				height: 100px;
				border: 1px solid green;
			}
			div #p1{
				width: 550px;
				height: 100px;
				border: 1px solid green;
				margin: 20px;
				border-bottom-color: transparent;
				border-left-color: transparent;
				border-right-color: transparent;
			}
			div#number{
				width: 600px;
				margin-top: 20px;
			}
			#number a{
				border: 1px solid #d6d6d6;
				padding: 5px 10px;
				border-radius: 5px;
				margin-right: 10px;
			}
			div#number a.current{
				border: 0 solid transparent;
				text-decoration: none;
				color: #000;
			}
		</style>
	</head>
	<body>
		<div id="product_card">
			<p id="p1"></p>
		</div>
		<div id="number">
			<a href="#" class="current">1</a>
			<a href="#">2</a>
			<a href="#">3</a>
			<a href="#">4</a>
			<a href="#">5</a>
			<a href="#">6</a>
		</div>
	</body>
</html>